<template>
  <div class="Product">
    <!-- 顶部标题 -->
    <top-title-bar>
      <template #left>
        <div class="left" @click="$router.go(-1)">
          <span class="iconfont icon-xiangzuo1"></span>
        </div>
      </template>
      <template #middle>
        <div class="middle"><span class="title">葫芦商品</span></div>
      </template>
      <template #right>
        <div class="right" @click="$router.push('/MsgView')">
          <span class="iconfont icon-xiaoxi"></span>
        </div>
      </template>
    </top-title-bar>
    <!-- 版心 -->
    <div class="wrap" v-if="Products">
      <van-tabs
        v-model="bannerId"
        sticky
        offset-top="50px"
        animated
        swipeable
        line-height="2px"
        title-inactive-color="#696969"
        title-active-color="#37d279"
        color="#15c861"
        line-width="20px"
        :ellipsis="false"
      >
        <van-tab
          :title="item.bannerName"
          v-for="item in Products"
          :key="item.bannerName"
        >
          <div class="Product-box" v-if="item.bannerName == '游戏礼包'">
            <div
              class="Product-item"
              v-for="obj in item.productGameInfoList"
              :key="obj.gameId"
              @click="$toast('兑换时间未到')"
            >
              <p class="money">{{ obj.giftTotal }}个礼包</p>
              <p class="title text-ellipsis-1">{{ obj.gameName }}</p>
              <div class="img"><img :src="obj.gameImg" alt="" /></div>
            </div>
          </div>
          <div class="Product-box" v-if="item.bannerName != '游戏礼包'">
            <div
              class="Product-item"
              v-for="obj in item.productInfoList"
              :key="obj.seq"
              @click="showPopupFun(obj.seq)"
            >
              <p class="money">{{ obj.credits }}葫芦</p>
              <p class="title text-ellipsis-1">{{ obj.name }}</p>
              <div class="img"><img :src="obj.icon" alt="" /></div>
            </div>
          </div>
          <p class="foot" v-if="item.bannerName != '游戏礼包'">
            更多精彩礼物兑换静静期待
          </p>
        </van-tab>
      </van-tabs>

      <van-popup
        v-model="virtualShow"
        round
        :close-on-click-overlay="false"
        position="bottom"
      >
        <div class="virtual-box" v-if="virtualData">
          <div class="head">
            <div class="left">{{ virtualData.name }}</div>

            <div class="right" @click="virtualShow = false">
              <span class="iconfont icon-guanbi"></span>
            </div>
          </div>

          <div class="body">
            <div class="shop-box">
              <div class="title">兑换金额</div>
              <div class="content">
                <div
                  :class="['shop-item', { con: money.seq == virtuaMoneySeq }]"
                  v-for="money in virtualData.subProductList"
                  :key="money.seq"
                  @click="virtuaMoneySeq = money.seq"
                >
                  {{ money.convert }}
                </div>
              </div>
            </div>
            <div class="state-box">
              <div class="left">
                消耗葫芦
                <span>{{
                  virtualData.subProductList[virtuaMoneySeq].credits
                }}</span>
              </div>
              <div :class="['right', { con: virtuaInventory }]">
                <van-tag
                  color="#7232dd"
                  v-show="!virtuaInventory"
                  @click="inventoryFun"
                  >催</van-tag
                >
                {{ virtuaInventory ? "库存充足" : "库存不足" }}
              </div>
            </div>
            <div class="form">
              <div v-if="virtuaTypeSeq == 0">
                <input
                  type="text"
                  placeholder="请输入本人真实姓名"
                  v-model="virtuaName"
                  maxlength="11"
                />
                <input
                  type="text"
                  placeholder="请输入本人真实身份证号"
                  v-model="virtuaId"
                  maxlength="18"
                />
                <input
                  type="text"
                  placeholder="请输入QQ号"
                  v-model="virtuaQq"
                  maxlength="11"
                />
              </div>
              <div v-if="virtuaTypeSeq == 1">
                <input
                  type="text"
                  placeholder="请输入本人真实姓名"
                  v-model="virtuaName"
                  maxlength="11"
                />
                <input
                  type="text"
                  placeholder="请输入本人真实身份证号"
                  v-model="virtuaId"
                  maxlength="18"
                />
                <input
                  type="text"
                  placeholder="请输入手机号"
                  v-model="virtuaPhone"
                  maxlength="11"
                />
              </div>
              <div v-if="virtuaTypeSeq == 2">
                <input
                  type="text"
                  placeholder="请输入本人真实姓名"
                  v-model="virtuaName"
                  maxlength="11"
                />
                <input
                  type="text"
                  placeholder="请输入本人真实身份证号"
                  v-model="virtuaId"
                  maxlength="18"
                />
                <input
                  type="text"
                  placeholder="请输入支付宝账号"
                  v-model="virtuaAlipay"
                  maxlength="11"
                />
                <input
                  type="text"
                  placeholder="请输入支付宝昵称,方便验证"
                  v-model="virtuaAlipayName"
                  maxlength="11"
                />
              </div>
              <button :class="{ con: virtuaSubFlag }" @click="subFun">
                提交申请
              </button>
              <p>备注：每月10日为商场开发兑换时间</p>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { getProductList } from "../assets/api/space.js";
import TopTitleBar from "../components/TopTitleBar.vue";
export default {
  data() {
    return {
      bannerId: 0, //标签页下标
      Products: null, //数据中心

      virtualShow: false, //是否显示虚拟货币弹窗
      virtualData: null, //虚拟货币弹窗数据
      virtuaMoneySeq: 0,
      virtuaTypeSeq: 0,
      //   virtuaSubFlag: false,移动至计算属性
      virtuaInventory: false, //库存标识
      virtuaName: "", //输入框
      virtuaId: "", //输入框
      virtuaQq: "", //输入框
      virtuaPhone: "", //输入框
      virtuaAlipay: "", //输入框
      virtuaAlipayName: "", //输入框
    };
  },
  methods: {
    dataInit() {
      this.ProductList();
      this.virtuaInventoryLocal();
    },

    // 检查本地数据是否已经催更过
    virtuaInventoryLocal() {
      console.log("本地检查");
      let inventory = JSON.parse(localStorage.getItem("inventory"));
      if (inventory) this.virtuaInventory = inventory.flag;
      else localStorage.setItem("inventory", JSON.stringify({ flag: false }));
    },

    // 显示弹窗
    showPopupFun(seq) {
      if (this.bannerId == 2) {
        this.virtualShow = true;
        // 虚拟货币
        this.virtualFun(seq);
      }
    },

    // 提交方法
    subFun() {
      if (!this.virtuaSubFlag) {
        console.log("请按照要求");
        this.$toast({ position: "top", message: "请按照要求执行" });
        return;
      }
      // 先隐藏弹窗
      this.virtualShow = false;
      // 本地记录查询我的葫芦数
      let balance = 0;
      let gourdDate = JSON.parse(localStorage.getItem("gourdDate"));
      if (gourdDate) balance = gourdDate.money;

      let virtuaItemList = this.Products[2];
      let virtuaItem = virtuaItemList.productInfoList[this.virtuaTypeSeq];
      let virtuaItemDetail = virtuaItem.subProductList[this.virtuaMoneySeq];
      let payBalance = virtuaItemDetail.credits;
      let title = "葫芦-兑换商品";
      let message = `尊敬的${virtuaItemList.user.nick},您好\n兑换物:${
        virtuaItem.name
      }${
        virtuaItemDetail.convert
      }\n兑换所需葫芦:${payBalance}\n您的葫芦数:${balance}\n兑换后剩余:${
        balance - payBalance
      }\n是否进行兑换
      `;
      let flag = balance - payBalance >= 0;
      this.$dialog
        .confirm({ title, message, showConfirmButton: flag })
        .then(() => {
          // on confirm
          this.$toast.loading({
            message: "加载中...",
            forbidClick: true,
            loadingType: "spinner",
            duration: 1000,
            onOpened: () => {
              let timeout = setTimeout(() => {
                this.$toast({
                  message: "兑换成功\n经人工核实后3-7个工作日到账",
                  icon: "certificate",
                });
                // 扣除葫芦
                gourdDate.money = balance - payBalance;
                localStorage.setItem("gourdDate", JSON.stringify(gourdDate));
                this.accountUpdate();
                clearTimeout(timeout);
              }, 500);
            },
            onClose: () => {
              this.$toast({
                message: "兑换失败",
                icon: "warning-o",
              });
            },
          });
        })
        .catch(() => {
          // on cancel
        });
    },

    // 催更方法
    inventoryFun() {
      this.$toast.loading({
        message: "申请中...",
        forbidClick: true,
        loadingType: "spinner",
        onOpened: () => {
          let timeout = setTimeout(() => {
            this.$toast({ position: "top", message: "全部催更申请成功" });
            clearTimeout(timeout);
            this.inventoryUpdate();
          }, 1000);
        },
      });
    },

    // 模拟库存更新方法
    inventoryUpdate() {
      let timeout = setTimeout(() => {
        this.$notify({
          type: "primary",
          message: "系统消息：\n兑换商城内有库存更新了\n快去看看吧！",
        });
        localStorage.setItem("inventory", JSON.stringify({ flag: true }));
        this.virtuaInventory = true;
        clearTimeout(timeout);
      }, 3000);
    },

    // 模拟兑换到账方法
    accountUpdate() {
      let timeout = setTimeout(() => {
        this.$notify({
          type: "success",
          message: "系统消息：\n兑换到账了\n快去看看吧！",
        });
        clearTimeout(timeout);
      }, 3000);
    },

    // 虚拟货币方法
    virtualFun(seq) {
      let arr = this.Products[this.bannerId].productInfoList;
      let index = arr.findIndex((o) => o.seq == seq);
      this.virtualData = arr[index];
      this.virtuaTypeSeq = seq;
    },

    // 请求获取数据
    async ProductList() {
      let banner_id = 0;
      let start = 0;
      let count = 12;
      let data = await getProductList({ banner_id, start, count });
      console.log(data);
      this.Products = data.products;
    },
  },
  created() {
    this.dataInit();
  },
  computed: {
    virtuaSubFlag() {
      if (
        !this.virtuaInventory ||
        this.virtuaName.length == 0 ||
        this.virtuaId < 17
      )
        return false;
      if (this.virtuaInventory && this.virtuaName && this.virtuaId)
        if (this.virtuaTypeSeq == 0)
          // this.virtuaQq 长度5-11位验证
          return this.virtuaQq.length >= 5 && this.virtuaQq.length <= 11;
        else if (this.virtuaTypeSeq == 1)
          // this.virtuaPhone 电话号码长度验证
          return this.virtuaPhone.length == 11;
        else if (this.virtuaTypeSeq == 2)
          // this.virtuaAlipay 长度验证
          // this.virtuaAlipayName 长度验证
          return (
            this.virtuaAlipay.length > 0 && this.virtuaAlipayName.length > 0
          );

      return false;
    },
  },
  components: {
    TopTitleBar,
  },
};
</script>

<style lang="scss" scoped>
.Product {
  background-color: #f0f0f0;
  min-height: 100%;
  .TopTitleBar {
    .left {
      .icon-xiangzuo1 {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
      }
    }
    .middle {
      display: flex;
      justify-content: center;
    }
    .right {
      .icon-xiaoxi {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
      }
    }
  }
  .wrap {
    ::v-deep .van-sticky {
      .van-tabs__nav {
        align-items: center;
        .van-tab {
          height: 36px;
          flex: none;
          padding: 0 25px;
          width: auto;
        }
        .van-tabs__line {
          bottom: 20px;
        }
      }
    }
    .Product-box {
      padding: 12px 9px;
      display: flex;
      flex-wrap: wrap;

      .Product-item {
        width: 113px;
        height: 180px;
        border-radius: 8px;
        background-color: #fff;
        box-sizing: border-box;
        margin-top: 12px;
        margin-right: calc((100% - 113px * 3) / 2);

        display: flex;
        flex-direction: column-reverse;

        &:active {
          box-shadow: 0 0 180px 0 inset rgba($color: #b69898, $alpha: 0.1);
          opacity: 0.9;
        }

        &:nth-child(3n) {
          margin-right: 0;
        }
        &:nth-child(-n + 3) {
          margin-top: 0;
        }

        .money {
          margin: 0 12px 12px;
          text-align: center;
          font-size: 13px;
          width: calc(100% - 24px);
          background-color: #17d568;
          border-radius: 9px;
          line-height: 18px;
          height: 18px;
          color: #fff;
        }
        .title {
          text-align: center;
          color: #333333;
          padding: 0 5px;
          width: 100%;
          box-sizing: border-box;
          height: 38px;
          line-height: 38px;
          font-size: 3px;
        }
        .img {
          width: calc(100% - 24px);
          margin: 12px 12px 0;
          flex: 1;
          border-radius: 6px;
          overflow: hidden;
        }
      }
    }
    .foot {
      font-size: 12px;
      color: #969696;
      margin-top: 15px;
      text-align: center;
    }
  }

  .virtual-box {
    padding: 10px 15px;

    .head {
      display: flex;
      height: 40px;
      font-weight: bold;
      align-items: center;
      justify-content: space-between;
    }
    .body {
      .shop-box {
        background-color: #fff;
        .title {
          font-size: 14px;
          color: #343434;
          height: 25px;
          line-height: 25px;
        }
        .content {
          display: flex;
        }
        .shop-item {
          font-size: 14px;
          flex: 1;
          margin-right: 15px;
          height: 32px;
          text-align: center;
          line-height: 32px;
          border-radius: 4px;
          background-color: #fff;
          border: 1px solid #969696;
          color: #969696;

          &.con {
            background-color: #0cc85c;
            border-color: #0cc85c;
            color: #fff;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }

      .state-box {
        height: 25px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        .left {
          color: #9b9b9b;
          font-size: 12px;
          span {
            color: #19d469;
            font-size: 16px;
          }
        }
        .right {
          color: #f6525a;
          font-size: 12px;
          &.con {
            color: #122fc9;
          }
        }
      }

      .form {
        margin-top: 10px;
        input {
          display: block;
          width: 100%;
          border: none;
          background-color: #fff;
          border-bottom: 1px solid #e3e3e3;
          padding: 12px 0;
        }
        button {
          margin: 20px 0;
          background-color: #bdbdbd;
          color: #fff;
          display: block;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-radius: 20px;
          padding: 0;
          border: 0;
          width: 100%;
          &.con {
            background-color: #0cc85c;
            color: #fff;
          }
        }
        p {
          color: #f5636a;
          font-size: 12px;
          text-align: center;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>